<template>
  <i-biz-control-base :controller="c" :class="[ns.b(c.model.name), ns2.b()]">
    <!-- 绘制默认列表 -->
    <template v-if="!!c.state.isCreated && mode === 'LIST'">
      <uni-list>
        <template v-for="item in c.state.items" :key="item.id">
          <!-- 绘制项 -->
          <i-biz-control-shell
            v-if="!!c.model.itemLayoutPanel"
            :data="item"
            :modelData="c.model.itemLayoutPanel"
            :context="c.context"
            :params="c.params"
            @click="() => c.onRowClick(item)"
          />
          <uni-list-item
            v-else
            :class="calcItemClass(item)"
            :title="item.srfmajortext || ''"
            showArrow
            :@click="() => c.onRowClick(item)"
          >
            <image
              v-if="Object.prototype.hasOwnProperty.call(item, 'image')"
              :class="ns.b('image')"
              :src="item.image"
              alt=""
            ></image>
            <radio :class="ns.bm('item', 'right')" :checked="isSelect(item)" />
          </uni-list-item>
        </template>
      </uni-list>
    </template>
    <!-- 绘制选择列表 -->
    <template v-else>
      <!-- 绘制卡片内容 -->
      <template v-for="(item, index) in c.state.items" :key="item.id">
        <!-- 绘制展开 -->
        <view
          v-if="index === props.rowsCount * props.columnsCount - 1"
          :class="[ns.b('item'), ns.b('item-expand')]"
          @click="openReviewList"
        >
          展开
        </view>
        <!-- 绘制默认列表项 -->
        <view v-else>
          <uni-tag
            @click="c.onRowClick(item)"
            :is="ns.e('tag')"
            @dblclick="c.onDbRowClick(item)"
            plain
            size="large"
            type="primary"
          >
            <text :class="ns.e('item-text')">{{
              item.srfmajortext || ""
            }}</text>
          </uni-tag>
        </view>
      </template>
      <!-- 绘制查看列表 -->
      <uni-popup
        :class="ns.b('popup')"
        ref="reviewListRef"
        type="share"
        safeArea
        backgroundColor="#fff"
      >
        <view :class="ns.b('popup-container')">
          <view :class="ns.b('popup-header')">
            <view>选择数据</view>
          </view>
          <view :class="ns.b('popup-content')">
            <!-- 预览列表 -->
            <template v-if="c.state.items.length === 0">
              <i-biz-no-data
                v-if="!!c.state.isLoaded"
                :text="c.model.emptyText"
                :emptyTextLanguageRes="c.model.emptyTextLanguageRes"
              ></i-biz-no-data>
            </template>
            <template v-else>
              <view
                v-for="item in c.state.items"
                :class="[
                  ns.b('item'),
                  ns.is(
                    'active',
                    c.state.selectedData.findIndex(
                      (data) => data.srfkey === item.srfkey
                    ) !== -1
                  ),
                ]"
                :key="item.srfkey"
              >
                <text>{{ item.srfmajortext || "" }}</text>
                <uni-icons
                  :class="ns.e('item-icon')"
                  type="trash-filled"
                  size="26"
                ></uni-icons>
                <!-- TODO 右侧箭头 -->
                <!-- <view>></view> -->
              </view>
            </template>
          </view>
        </view>
      </uni-popup>
      <!-- 绘制加载更多 -->
      <view :class="ns.b('load-more')" @click="c.loadMore">
        <text>加载更多</text>
      </view>
    </template>
  </i-biz-control-base>
</template>
<script lang="ts">
export default {
  options: {
    addGlobalClass: true,
    virtualHost: true,
    styleIsolation: "shared"
  },
};
</script>
<script setup lang="ts">
import { PropType, ref } from "vue";
import { IDEList } from "@ibiz/model-core";
import { ListController } from "@ibiz-template/runtime";
import { useControlController, useNamespace } from "@/use";

const props = defineProps({
  modelData: { type: Object as PropType<IDEList>, required: true },
  context: { type: Object as PropType<IContext>, required: true },
  params: { type: Object as PropType<IParams>, default: () => ({}) },
  mdctrlActiveMode: { type: Number, default: 1 },
  singleSelect: { type: Boolean, default: true },
  rowsCount: { type: Number, default: 2 },
  columnsCount: { type: Number, default: 5 },
  loadDefault: { type: Boolean, default: true },
  mode: { type: String, default: "LIST" },
});

const c = useControlController((...args) => new ListController(...args));

const ns = useNamespace(`control-${c.model.controlType!.toLowerCase()}`);
const ns2 = useNamespace(`control-mobmdctrl`);

const reviewListRef = ref();

const openReviewList = () => {
  // showPicker.value = true
  console.log("reviewListRef", reviewListRef.value);
};

const isSelect = (row: IData) => {
  const findIndex = c.state.selectedData.findIndex((data) => {
    return data.srfkey === row.srfkey;
  });
  return findIndex !== -1;
};
const calcItemClass = (row: IData) => {
  const select = isSelect(row);
  const itemClass = [ns.b("item"), ns.is("active", select)];
  return itemClass;
};
</script>
<style lang="scss">
@import "./i-biz-list-control.scss";
</style>
